<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>List UserMessage</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" th:href="@{/css/font.css}">
<link rel="stylesheet" th:href="@{/css/xadmin.css}">
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-input-inline layui-show-xs-block">
								<label> <input type="text" name="username"
									placeholder="请输入姓名" autocomplete="off" class="layui-input">
								</label>
							</div>
							<div class="layui-input-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-header">
						<button class="layui-btn layui-btn-danger" onclick="delAll()">
							<i class="layui-icon"></i>批量删除
						</button>
						<button class="layui-btn"
							onclick="xadmin.open('添加用户','/addUserMessage',800,600, false)">
							<i class="layui-icon"></i>添加
						</button>

					</div>
					<div class="layui-card-body ">
						<table class="layui-table layui-form" lay-filter="table"
                           id="userMessage">
                    </table>
					</div>

				</div>
			</div>
		</div>
	</div>
	<script>
		layui.use([ 'form', 'layer', 'table' ], function() {
			var table = layui.table, form = layui.form, $ = layui.$;
			//执行一个laydate实例
			table.render({
						elem : '#userMessage', //指定元素
						url : '/userMessage/list',
						toolbar: '#toolbarDemo',
				        totalRow: true,
						page : {
							layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ],
							groups : 1,
							first : false,
							last : false
						},
						cols : [ [ //表头
							{type : 'checkbox'},
							{field : 'userNo', title : '用户编号', width : 100, align:"center", sort : true},
							{field : 'userName', title : '用户名称', width : 100, align:"center", sort : true},
							{field : 'userPassword', title : '密码', width : 100, align:"center", sort : true},
							{field : 'portrait', title : '用户头像', width : 140, align:"center", sort : true,
								templet : '#img'},
							{field : 'sex', title : '用户性别', width : 100, align:"center", sort : true},
							{field : 'userAddress', title : '用户收货地址', width : 160, align:"center", sort : true},
							{field : 'userPhone', title : '用户联系方式', width : 160, align:"center", sort : true},
							{field : 'signature', title : '用户个性签名', align:"center", width : 120},
							{fixed : 'right', title : '操作', toolbar : '#barDemo', align:"center", width : 150}
						] ]
					});
			//工具栏事件
	        table.on('toolbar(table)', function(obj){
	            let checkStatus = table.checkStatus(obj.config.id);
	            switch(obj.event){
	                case 'getCheckData':
	                    var data = checkStatus.data;
	                    layer.alert(JSON.stringify(data));
	                    break;
	                case 'getCheckLength':
	                    var data = checkStatus.data;
	                    layer.msg('选中了：'+ data.length + '个');
	                    break;
	                case 'isAll':
	                    layer.msg(checkStatus.isAll ? '全选': '未全选')
	                    break;
	            }
			});

				//监听行工具事件
			table.on('tool(table)', function(obj){
				var data = obj.data;
				console.log(obj.data.userNo)
				switch (obj.event) {
					case 'edit':
						xadmin.open('修改用户信息','/userMessage/edit_page?userNo='+obj.data.userNo,550,400,false)
						break;
					case 'del':
						layer.confirm('真的删除该数据吗?', function(index){
							$.ajax({
								url: '/userMessage/delete?userNo='+obj.data.userNo,
								type: 'post',
								success: function (res) {
									if (res.code === 0) {
										//弹出提示，并在1秒后进行跳转
										layer.alert("删除成功", {
											icon : 6
										}, function() {
											obj.del();
											layer.close(index);
											location.reload();
											return false;
										});
									} else {
										layer.msg("删除失败:" + res.msg);
										return false;
									}
								}
							})
						});
						break;
				}
			});
	});
	</script>

	<script type="text/html" id="img">
		<img id="porImg" src="{{d.portrait}}" onclick="showBigImage(this)" alt="这是头像" height="24px" width="24px">
	</script>
	
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

	<script>
		function showBigImage(e) {
			var Width = e.width;
			var Height = e.height;
			var scaleWH = Width / Height;
			var bigH = 600;
			var bigW = scaleWH * bigH;
			if (bigW > 1000) {
				bigW = 1000;
				bigH = bigW / scaleWH;
			} // 放大预览图片
			layer.open({
				type: 1,
				title: false,
				closeBtn: 1,
				shadeClose: true, //点击阴影关闭
				area: [bigW + 'px', bigH + 'px'], //宽高
				content: "<img src=" + $(e).attr('src') + " />"
			});
		}
	</script>
    
    

</body>
</html>